<template>
	<view class="container">
		<view class="header">
			<text class="title">我的笔记</text>
		<!-- 	<view class="add-btn" @click="createNote">
				<uni-icons type="plus" size="20" color="#fff"></uni-icons>
			</view> -->
		</view>
		
		<!-- 笔记分类 -->
		<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
			<view class="category-list">
				<view 
					v-for="(category, index) in categories" 
					:key="index"
					class="category-item"
					:class="{ active: currentCategory === category.id }"
					@click="selectCategory(category.id)"
				>
					{{ category.name }}
				</view>
			</view>
		</scroll-view>
		
		<!-- 笔记列表 -->
		<view class="note-list">
			<view class="note-item" v-for="(note, index) in noteList" :key="index" @click="viewNote(note)">
				<view class="note-header">
					<text class="note-title">{{ note.title }}</text>
					<text class="note-date">{{ note.date }}</text>
				</view>
				<text class="note-preview">{{ note.content }}</text>
				<view class="note-footer">
					<view class="tag" v-for="(tag, tagIndex) in note.tags" :key="tagIndex">
						{{ tag }}
					</view>
					<view class="course-name">{{ note.course }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentCategory: 1,
				categories: [
					{ id: 1, name: '全部' },
					{ id: 2, name: '课堂笔记' },
					{ id: 3, name: '实验记录' },
					{ id: 4, name: '复习总结' },
					{ id: 5, name: '临床实践' }
				],
				noteList: [
					{
						id: 1,
						title: '心脏解剖结构',
						content: '心脏是人体重要的器官，位于胸腔内，主要由心肌组成...',
						date: '2024-03-19',
						tags: ['解剖学', '循环系统'],
						course: '人体解剖学'
					},
					{
						id: 2,
						title: '神经系统疾病诊断要点',
						content: '神经系统疾病的诊断需要注意以下几个关键点...',
						date: '2024-03-18',
						tags: ['神经病学', '诊断'],
						course: '神经病学'
					},
					{
						id: 3,
						title: '常用抗生素分类',
						content: '抗生素按照其作用机制可以分为以下几类...',
						date: '2024-03-17',
						tags: ['药理学', '抗生素'],
						course: '药理学'
					}
				]
			}
		},
		methods: {
			selectCategory(categoryId) {
				this.currentCategory = categoryId;
				// TODO: 根据分类获取笔记列表
			},
			createNote() {
				uni.navigateTo({
					url: '/pages/note/edit'
				});
			},
			viewNote(note) {
				uni.navigateTo({
					url: `/pages/note/detail?id=${note.id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
		
		.add-btn {
			width: 60rpx;
			height: 60rpx;
			background-color: #4b7bec;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.category-scroll {
		margin-bottom: 30rpx;
		
		.category-list {
			display: flex;
			padding: 0 10rpx;
			
			.category-item {
				padding: 10rpx 30rpx;
				margin-right: 20rpx;
				background: #fff;
				border-radius: 100rpx;
				font-size: 28rpx;
				color: #7f8c8d;
				white-space: nowrap;
				
				&.active {
					background: #4b7bec;
					color: #fff;
				}
			}
		}
	}
	
	.note-list {
		.note-item {
			background: #fff;
			padding: 20rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.note-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				
				.note-title {
					font-size: 32rpx;
					font-weight: 500;
					color: #2c3e50;
				}
				
				.note-date {
					font-size: 24rpx;
					color: #95a5a6;
				}
			}
			
			.note-preview {
				font-size: 28rpx;
				color: #7f8c8d;
				line-height: 1.5;
				margin-bottom: 16rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			
			.note-footer {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				
				.tag {
					padding: 4rpx 16rpx;
					background: rgba(75, 123, 236, 0.1);
					color: #4b7bec;
					border-radius: 100rpx;
					font-size: 24rpx;
					margin-right: 12rpx;
					margin-bottom: 8rpx;
				}
				
				.course-name {
					font-size: 24rpx;
					color: #95a5a6;
					margin-left: auto;
				}
			}
		}
	}
</style> 